<script setup>
import { onMounted, ref } from 'vue'
import { showAllApi, addApi, showBackApi, updateApi, delApi } from '@/api/user'
import { ElMessage } from 'element-plus'
const searchformData = ref({
  empNo: '',
  empName: '',
  role: '',
})
const tableData = ref([])
const ids = ref([])
const handleSelectionChange = (val) => {
  ids.value = val.map(item => item.id)
}
const delById = (id) => {
  ids.value = id
  delByIds()
}
const delByIds = async () => {
  const res = await delApi(ids.value)
  if (res.code) {
    ElMessage.success('删除成功!')
    getAll()
  } else {
    ElMessage.error('删除失败！')
  }
}
const ruleFormRef = ref(null)
const rules = ref({
  id: [
    { required: true, message: '请输入', trigger: 'blur' },
    { min: 3, max: 10, message: '长度应该在3-10', trigger: 'blur' },
  ],
  empName: [
    { required: true, message: '请输入，不能为空', trigger: 'blur' },
  ],
  role: [
    { required: true, message: '请输入，不能为空', trigger: 'blur' },
  ],
  gender: [
    { required: true, message: '请输入，不能为空', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入，不能为空', trigger: 'blur' },
  ]
})
const resetForm = () => {
  dialogVisible.value = false
  dialogFormData.value = {
    id: '',
    empName: '',
    role: '',
    gender: '',
    phone: '',
    isEffective: ''
  }
  ruleFormRef.value.resetFields()
}
const showBack = async (id) => {
  const res = await showBackApi(id)
  dialogVisible.value = true
  dialogFormData.value = res.data
}
const save = async () => {
  let res = null;
  if (!ruleFormRef) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (dialogFormData.value.id) {
        res = await updateApi(dialogFormData.value)
        InputDisabled.value = false
      } else {
        res = await addApi(dialogFormData.value)
      }
      if (res.code) {
        ElMessage.success('操作成功!')
        resetForm()
        getAll()
      } else {
        ElMessage.error('操作失败！')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
const dialogVisible = ref(false)
const addShow = () => {
  dialogVisible.value = true
}
const dialogFormData = ref({
  id: '',
  empName: '',
  role: '',
  gender: '',
  phone: '',
  isEffective: 1
})
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const size = ref('default')
const background = ref(true)
const disabled = ref(false)
const getAll = async () => {
  console.log("正在查询")
  const res = await showAllApi(searchformData.value.empNo, searchformData.value.empName,
    searchformData.value.role, currentPage.value, pageSize.value)
  tableData.value = res.rows
  total.value = res.total

}
const indexMethod = (index) => {
  return index + 1
}
const handleSizeChange = (val) => {
  pageSize.value = val
  getAll()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getAll()
}

onMounted(() => {
  getAll()
})
</script>

<template>

  <el-dialog v-model="dialogVisible" style="width: 400px;">
    <el-form ref="ruleFormRef" :model="dialogFormData" :rules="rules">
      <el-row>
        <el-col span="24">
          <el-form-item label="员工编号" prop="empNo">
            <el-input v-model="dialogFormData.empNo" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item label="员工名称" prop="empName">
            <el-input v-model="dialogFormData.empName" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item label="角色" prop="role">
            <el-input v-model="dialogFormData.role" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item label="性别" prop="gender">
            <el-input v-model="dialogFormData.gender" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="dialogFormData.phone" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-switch v-model="dialogFormData.isEffective" active-value='1' inactive-value='0' />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-form :model="searchformData">
    <el-row gutter="20">
      <el-col span="6">
        <el-button type="primary" @click="addShow">新增</el-button>
        <el-button type="danger" @click="delByIds">删除</el-button>
      </el-col>
      <el-col span="6">
        <el-form-item label="员工编号">
          <el-input v-model="searchformData.empNo" />
        </el-form-item>
      </el-col>
      <el-col span="6">
        <el-form-item label="员工名称">
          <el-input v-model="searchformData.empName" />
        </el-form-item>
      </el-col>
      <el-col span="6">
        <el-form-item label="角色">
          <el-input v-model="searchformData.role" />
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button type="primary" @click="getAll()">搜索</el-button>
        <el-button type="danger" @click="getAll">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>
  <br />

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column fixed type="index" label="#" :index="indexMethod" />
    <el-table-column type="selection" width="50" />
    <el-table-column prop="empNo" label="员工编号" width="80" />
    <el-table-column prop="empName" label="员工名称" width="120" />
    <el-table-column prop="role" label="角色" width="120" />
    <el-table-column prop="gender" label="性别" width="120" />
    <el-table-column prop="phone" label="联系方式" width="120" />
    <el-table-column prop="isEffective" label="是否有效" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="showBack(row.id)">
          修改
        </el-button>
        <el-button link type="primary" size="small" @click="delById(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>